import './Scss/MachineryKeynote.scss'

import { useRequest } from 'ahooks'
import { Http } from '../../../../Common/Api'
import { useState, useEffect } from 'react'
import { ICON } from '../../../../Common/Configure/Icon'
import { Pie } from '@ant-design/plots'

export const MachineryKeynote001 = () => {
    const { run: geyMachineManageGetListByType } = useRequest(Http, {
        manual: true,
        onSuccess: ({ list }) => {
            const one = list.find(v => v.tableName === '平地机')
            const two = list.find(v => v.tableName === '36T振动压路机')
            // const thr = list.find(v => v.tableName === '灰土拌合机')
            setDataOne([
                ['平地机', one?.machineTypeStandardCount || 0, one?.machineCount || 0],
                ['36T振动压路机', two?.machineTypeStandardCount || 0, two?.machineCount || 0],
            ])
        },
    })
    useEffect(
        () => geyMachineManageGetListByType({ url: `getMachineManageGetListByType` }),
        [geyMachineManageGetListByType],
    )

    const [MType] = useState([
        { uuid: '1', icon: ICON['pingdiji'], title: '平地机', color: '#FE6541' },
        { uuid: '2', icon: ICON['yaluji'], title: '压路机', color: '#DEA200' },
    ])
    const [TitleOne] = useState([
        { uuid: '1', title: '机械名称', flex: 110 },
        { uuid: '2', title: '标配数量', flex: 73 },
        { uuid: '3', title: '进场数量 ', flex: 73 },
    ])

    const [DataOne, setDataOne] = useState([
        ['平地机', '28', '21'],
        ['重型压路机', '28', '21'],
        ['灰土拌合机', '28', '21'],
    ])
    return (
        <div className="MachineryKeynote001">
            <div>
                {MType.map(({ uuid, icon, title, color }) => (
                    <div key={uuid}>
                        <div style={{ background: color }}>{icon}</div>
                        <div>{title}</div>
                    </div>
                ))}
            </div>
            <div>
                <div className="Title">
                    {TitleOne.map(({ uuid, title, flex }) => (
                        <div key={uuid} style={{ flex }}>
                            {title}
                        </div>
                    ))}
                </div>
                <div className="List">
                    {DataOne.map((item, index) => (
                        <div key={index}>
                            {item.map((value, key) => (
                                <div style={{ flex: TitleOne[key].flex }} key={key}>
                                    {value}
                                </div>
                            ))}
                        </div>
                    ))}
                </div>
            </div>
        </div>
    )
}

export const MachineryKeynote002 = () => {
    const { run: getMachineManageGetListByType } = useRequest(Http, {
        manual: true,
        onSuccess: res => {
            let number = 0
            let list = []
            res.list.forEach(({ uuid, tableName, machineCount }) => {
                if (tableName === '平地机' || tableName === '36T振动压路机') {
                    number += machineCount
                    list = [...list, { uuid, type: tableName, value: machineCount }]
                }
            })
            setNumber(number)
            setData(list)
        },
    })
    useEffect(() => {
        getMachineManageGetListByType({ url: `getMachineManageGetListByType` })
    }, [getMachineManageGetListByType])

    const [number, setNumber] = useState(0)
    const [Color] = useState(['#07CCB0', '#BFFFA7', '#FF817C', '#ACCDFF', '#B9ECED'])
    const [Data, setData] = useState([])
    const [Charts, setCharts] = useState()

    useEffect(() => {
        const config = {
            autoFit: false,
            width: 212,
            height: 212,
            data: Data,
            angleField: 'value',
            colorField: 'type',
            color: Color,
            radius: 1,
            innerRadius: 0.6,
            interactions: [{ type: 'element-default' }],
            label: false,
            tooltip: false,
            legend: false,
            statistic: {
                title: {
                    offsetY: 5,
                    style: { fontSize: 30, fontFamily: 'Bahnschrift', fontWeight: 'bold', color: '#FFFFFF' },
                    content: number,
                },
                content: {
                    offsetY: 10,
                    style: { fontSize: '16px', fontFamily: 'PingFang', fontWeight: 'bold', color: '#60EAFF' },
                    content: '重点机械',
                },
            },
            pieStyle: { lineWidth: 0 },
        }
        setCharts(config)
    }, [Color, Data, number])

    return (
        <div className="MachineryKeynote002">
            {Charts && <Pie {...Charts} />}
            <div className="Table">
                {Data.map(({ uuid, type, value }, index) => (
                    <div key={uuid}>
                        <div style={{ color: Color[index] }}>{type}</div>
                        <div>{value} 台</div>
                    </div>
                ))}
            </div>
        </div>
    )
}
